```svelte
<script lang="ts">
  import * as signaturePad from "@zag-js/signature-pad"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(signaturePad.machine, { id })
  const api = $derived(signaturePad.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <label {...api.getLabelProps()}>Signature Pad</label>

  <div {...api.getControlProps()}>
    <svg {...api.getSegmentProps()}>
      {#each api.paths as path}
        <path {...api.getSegmentPathProps({ path })} />
      {/each}
      {#if api.currentPath}
        <path {...api.getSegmentPathProps({ path: api.currentPath })} />
      {/if}
    </svg>

    <button {...api.getClearTriggerProps()}>X</button>

    <div {...api.getGuideProps()}></div>
  </div>
</div>
```
